<template>
  <div class="front shopHome">
    <div class="banner_bg"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage ? shopInfo.shopBackendImage : 'https://image.utea88.com/statics/pc_shop_banner.png'})`}">
    </div>
    <div class="docWidth">
      <div class="bigTitle"><span>热卖商品</span></div>

      <GoodList :list="hotProduct.slice(0,5)" @handleDetail="toDetail"></GoodList>
      
      <div class="infoBox">
        <div class="left">
          <div class="shopInfo">
            <div class="textBox">
              <div class="name">{{shopInfo.shopName}}</div>
              <el-row style="margin-top:17px;">
                <el-col :span="9">卖家：</el-col>
                <el-col :span="15">{{shopInfo.companyName}}</el-col>
              </el-row>
              <el-row style="margin-top:17px;font-size:15px">
                <el-col :span="9">所在地：</el-col>
                <el-col :span="15">
                  {{shopInfo.companyProvinceName}}{{shopInfo.companyCityName}}{{shopInfo.companyDistrictName}}</el-col>
              </el-row>
              <!-- <el-row style="margin-top:17px;">
                <el-col :span="9">联系电话：</el-col>
                <el-col :span="15">{{shopInfo.mobile}}</el-col>
              </el-row> -->
              <el-row style="margin-top:17px;">
                <el-col :span="9">入驻时间：</el-col>
                <el-col :span="15">{{shopInfo.createTime | formatDate}}</el-col>
              </el-row>
            </div>
            <div class="countbox">
              <el-row style="margin-top:27px;">
                <el-col :span="14">成交数</el-col>
                <el-col :span="10">买家数</el-col>
              </el-row>
              <el-row style="margin-top:5px;">
                <el-col :span="14" style="color:#952824">{{shopInfo.shopDealNum}}</el-col>
                <el-col :span="10" style="color:#952824">{{shopInfo.shopBuyerNum}}</el-col>
              </el-row>
              <el-row style="margin-top:27px;">
                <el-col :span="14">交货周期</el-col>
                <el-col :span="10">退货率</el-col>
              </el-row>
              <el-row style="margin-top:5px;">
                <el-col :span="14" style="color:#952824">{{shopInfo.shopDealDay}}</el-col>
                <el-col :span="10" style="color:#952824">{{shopInfo.shopRefundRate}}</el-col>
              </el-row>
            </div>
          </div>
          <!-- <div class="infoDetail">
            <div class="title">店铺介绍</div>
            <div class="infoContent" v-html="shopInfo.shopRemark"></div>
          </div> -->
        </div>
        <div class="right">
          <div class="title">最新商品</div>
          <div class="productList">
            <ul v-if="newProduct && newProduct.length">
              <li v-for="(item,index) in newProduct" :key="index" @click="toDetail(item)">
                <div class="image" :style="{backgroundImage:`url(${item.image})`}"></div>
                <div class="good-title">{{item.name}}</div>
                <div v-if="userInfo.status === 1" class="price_warpper">
                  <div class="price">{{item.priceText!=='面议'?'￥':''}}<span>{{item.priceText}}</span></div>
                </div>
                <PriceInfo v-else></PriceInfo>
              </li>
            </ul>
            <p style="text-align:center;color:#666;margin:40px 10px" v-else>该供应商暂未上架任何商品</p>
          </div>
        </div>
      </div>
      <div class="imgs" v-if="imgs && imgs.length > 0">
        <div class="title">店铺展示</div>
        <div class="fleImgs">
          <div class="item" v-for="(item,index) in imgs" :key="index" :style="{backgroundImage:`url(${item.image})`}">
          </div>
        </div>
      </div>
      <div class="tuijianList">
        <div class="title">热门推荐</div>
        <GoodList :list="hotProduct" @handleDetail="toDetail"></GoodList>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { shopItemListByQo, productPageByQo } from "@/api/front-home";
import GoodList from "@/views/front/shop/components/GoodList";
import PriceInfo from "@/views/front/components/priceInfo.vue";
export default {
  name: 'FrontShopHome',
  components: {GoodList, PriceInfo},
  filters: {
    formatDate(value) {
      if (!value) return ''
      return value.toString().split(' ')[0]
    }
  },
  data() {
    return {
      imgs: [],
      newsList: [],
      hotProduct: [],
      newProduct: [],
      shopId: 0
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      shopInfo: state => state.front.shopInfo,
    })
  },
  created() {
    this.shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    if (this.$store.state.front.shopId !== this.shopId) {
      this.$store.commit("front/SET_SHOPID", this.shopId)
      this.$store.dispatch('front/getShopInfo', this.shopId)
    }
    this.shopItemListByQo(this.shopId)
    this.getHotProduct(this.shopId)
    this.getNewProduct(this.shopId)
  },
  updated() {
    this.$nextTick(() => {
      let imgList = document.querySelectorAll(".productList .image")
      if (imgList && imgList.length > 0) {
        imgList.forEach(img => {
          img.style.height = img.getBoundingClientRect().width + 'px';
        });
      }
    })
  },
  methods: {
    shopItemListByQo(id) {
      shopItemListByQo({ id: id, type: 2 }).then((res) => {
        this.imgs = res ? res.slice(0, 5) : []
      });
    },
    getHotProduct(id) {
      productPageByQo({ pageNo: 1, pageSize: 12, memberId: id, saleNum$sort: 'desc',auditStatus:1 }).then((res) => {
        this.hotProduct = res.list || []
      });
    },
    getNewProduct(id) {
      productPageByQo({ pageNo: 1, pageSize: 3, memberId: id, createTime$sort: 'desc',auditStatus:1 }).then((res) => {
        this.newProduct = res.list || []
      });
    },
    toDetail(goodItem) {
      this.$router.push({ path: '/front-shop/productDetail', query: { id: this.shopId, productId: goodItem.id } });
    },
    collect2() {
      const params = {
        otherId: this.shopId,
        type: 2
      }
      this.$store.dispatch('front/collect', params).then(() => {
        this.$message.success('操作成功')
        this.$store.dispatch('front/getShopInfo', this.shopId)
      }).catch(() => [
        this.$message.error('操作失败')
      ])
    }
  },
};
</script>
<style lang="scss" scoped>
.shopHome {
  .banner_bg {
		position: relative;
		width: 100%;
		height: 328px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .bigTitle {
    font-size: 25px;
    font-weight: 400;
    color: #000000;
    line-height: 37px;
    padding: 30px 0 25px;
    text-align: center;
    position: relative;
    &:after {
      content: "";
      width: 30px;
      height: 4px;
      background: #965f29;
      position: absolute;
      left: 50%;
      margin-left: -15px;
      bottom: 15px;
    }
  }
  .infoBox {
    margin-top: 40px;
    display: flex;
    padding-bottom: 20px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 38px;
      background: #965f29;
      padding: 0 20px;
      margin-bottom: 13px;
    }
    .left {
      width: 280px;
      margin-right: 30px;
      .shopInfo {
        border: 1px solid #e5e5e5;
        padding: 30px 28px;
        .textBox {
          padding-bottom: 25px;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: -18px;
            right: -18px;
            bottom: 0;
            height: 1px;
            background: #e6e6e6;
          }
          .name {
            font-size: 18px;
            color: #000;
          }
        }
      }
      .infoDetail {
        margin-top: 20px;
        .title {
          margin-bottom: 0;
        }
        .infoContent {
          padding: 30px 25px;
          border: 1px solid #e5e5e5;
          border-top: none;
          font-size: 16px;
          font-weight: 400;
          color: #000000;
          line-height: 2;
        }
      }
    }
    .right {
      flex: 1;
      .productList {
        ul {
          // margin-left: -22px;
          width: 100%;
          li {
            // margin-left: 22px;
            // width: 282px;
            // margin-bottom: 28px;

            width: calc(33% - 15px);
            .image {
              height: 216px;
            }
          }
        }
      }
    }
  }
  .imgs {
    margin-top: 15px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 38px;
      background: #965f29;
      padding: 0 20px;
      margin-bottom: 20px;
      text-align: center;
    }
    .fleImgs {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .item {
        width: 220px;
        height: 220px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
  }
  .tuijianList {
    padding-bottom: 30px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 38px;
      background: #965f29;
      padding: 0 20px;
      margin-bottom: 20px;
      text-align: center;
    }
  }
}
</style>
